<template>
  <el-dialog :visible="showDialog" top="10vh" width="68%" @close="handleClose">
    <template #title>
      <h2 style="text-align: center">
        😏🥶🤬🤢🥸👿👻👽👾🤖💩😾🙈🦓🐴🦄🐔🌭🍟🥨🥯🥖🧑‍🎄🎅
      </h2>
      <h2 style="text-align: center">文章预览</h2>
      <h2 style="text-align: center">
        😏🥶🤬🤢🥸👿👻👽👾🤖💩😾🙈🦓🐴🦄🐔🌭🍟🥨🥯🥖🧑‍🎄🎅
      </h2>
    </template>
    <el-row>
      <!-- 标题 -->
      <h3>{{ subjectData.title }}</h3>
      <!-- 时间 -->
      <p>
        <span> {{ subjectData.createTime }} </span>
        &nbsp;
        <span> {{ subjectData.username }} </span>
        &nbsp;
        <span><i class="el-icon-view" /> {{ subjectData.visits }} </span>
      </p>
    </el-row>
    <el-divider />
    <el-row>
      <p v-html="subjectData.articleBody" />
    </el-row>
    <template #footer>
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'InfoCom',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    subjectData: {
      type: Object,
      required: true
    }
  },
  created() {
    console.log('学科详情', this.subjectData)
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit('add-success')
      this.$emit('closeDialog')
    }
  }
}
</script>

<style>
</style>
